/**
 * 单个文件
 * author Forjune
 */
import React from 'react'
import Picture from '../picture'
import './index.styl'
import pic from 'dic/pic'
import { Popover } from 'antd'
const { obj } = pic

export default function FileItem({ data }) {
  const getImgPicture= (str) => {
    if (str.endsWith("jpg") || str.endsWith("JPG")) {
      return obj['jpg']
    }
    if (str.endsWith("png") || str.endsWith("PNG")) {
      return obj['png']
    }
    if (str.endsWith("JPEG") || str.endsWith("jpeg")) {
      return obj['jpeg']
    }
  }
 
  return (
    <div className="fileItem">
      <div className="fileItem-title">
        <img src={getImgPicture(data.fileUrl)} alt=''/>
        <div className="file-name">
        {
          data.fileName && data.fileName.length > 10
          ?
          <Popover content={data.fileName} placement="bottom" getPopupContainer={triggerNode => triggerNode.parentNode}>
            {data.fileName.slice(0,10)+'...'}
          </Popover>
          :
          data.fileName
        }
        </div>
        {/* <span className="file-name">{data.fileName}</span> */}
        <span className="delete-file">X</span>
      </div>
      <div className="fileItem-btn">
        <Picture imgUrl={data.fileUrl} name={data.fileName}/>
      </div>
    </div>
  )
}
